<template>
  <div class="middle">
    <img src="@/assets/ShoppingCart2.png" />
    <div class="search">
      <el-autocomplete
      class="inline-input"
      v-model="input"
      @input="handleInput"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      :debounce="0"
      @select="handleSelect"
    ></el-autocomplete>
      <i class="fa"><a href="#" class="el-icon-camera"></a></i>
      <el-button type="primary" icon="el-icon-search" round size="mini" class="searchbtn" @click="ss">搜索</el-button>
    </div>
    <el-col :span="12">
      <div class="demo-basic--circle">
        <div class="block">
         <img :src="user.userImg" >
        </div>
      </div>
    </el-col>
    <div class="login">
      <i v-if="!checked">Hi!你好，请登录</i>
      <i v-else style="display: flex; margin-top: 20px;">欢迎，你使用手办商城</i>
      <el-row v-if="!checked">
        <el-button type="primary" size="mini" @click="login()">登录</el-button>
        <el-button type="success" size="mini" @click="sign()">注册</el-button>
      </el-row>
      <el-row v-else style="margin-top: 10px;">
        <span>用户：</span>
       <span v-if="user.userName"> {{ user.userName }} </span>
       <span v-else> {{ user.phone }}</span>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      restaurants: [],
      timeoutId: null,
      user:{},
      checked:false
    }
  },
  async  created(){
    this.user=this.$cookies.get("user") 
    if(this.user){
      if(this.user.userImg){
        this.$api.rear_end.download(this.user.userImg).then((res) => {
						let url = window.URL.createObjectURL(
							new Blob([res.data], { type: 'image/jpeg' })
						) 
						this.user.userImg = url
					})
      }else{
        this.user.userImg=require("@/assets/images/iyrkgi89.png")
      }
      this.checked=true
    }else{
      this.user={
        userImg:require("@/assets/images/iyrkgi89.png")
      }
    }
   
  },
  methods: {
    login() {
      this.$router.push({ path: '/login' })
    },
    sign() {
      this.$router.push({ path: '/sign' })
    },
ss(){
if(this.input.trim()!==''){
  this.$emit("search",this.input.trim())
}else{
  this.$message.error("请输入搜索内容！")
}
},
querySearch(queryString, cb) {
   // 在没有数据时，直接返回一个空数组，避免闪烁
   if (queryString.trim() === '') {
      cb([]);
    } else{
  setTimeout(() => {
    var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
      cb(results);
        }, 300 * Math.random())
        
      }},
      createFilter(queryString) {
        return (restaurant) => {
          return (true);
        };
      },
      //获取补全搜索请求方法
  async    mySuggestion(name1){
    const input={name:name1}
    const res=await this.$api.sort.mySuggestion(input)
    if(res.data.code===1){
      const ss=[]
      res.data.data.forEach(item => {
        const value={value:item}
        ss.push(value)
      });
     this.restaurants= ss
    }
      },
      //input输入不发生变化就发起请求
  handleInput() {
 
      this.mySuggestion(this.input)
      
    }, 
    handleSelect(item) {
        console.log(item)
      },
  },
  
  
}
</script>

<style scoped>

img {
  width: 200px;
  height: 100px;
  position: absolute;
  object-fit: cover;
  overflow: hidden;
  top: 60px;
  left: -10px;
}
.search {
  width: 50%;
}
.search .inline-input {
  position: absolute;
  left: 25%;
  top: 80px;
  border-radius: 9px;
  width: 50%;
  height: 35px;
}

.fa {
  position: absolute;
  margin-top: 20px;
  left: 62%;
  top: 68px;
}
.fa a {
  font-size: 20px;
  color: #b2b2b2;
  text-decoration: none;
}
.el-button {
  position: absolute;
  margin-top: 23px;
  left: 65%;
}
.searchbtn{
  position: absolute;
  top: 61px;
}
.search .el-button--primary {
  background: #ff5900;
  border: #ff5900;
  color: white;
}
.search .el-button--primary:active {
  background: #ff5900;
}

.demo-basic--circle {
  position: absolute;
  left: 78%;
  top: 40px;
}
.demo-basic--circle .block{
  width: 50px;
  height: 50px;
}
.demo-basic--circle .block img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;

}
.login {
  position: absolute;
  left: 85%;
  top: 60px;
}
.login i {
  top: -30px;
  font-family: 'Helvetica Neue';
  color: #b7b3b3;
}
.login .el-button--primary {
  background-color: #ff5900;
  border: #ff5900;
  left: -8px;
  top: -10px;
}

.login .el-button--success {
  background-color: white;
  color: #ff5900;
  top: -10px;
  border: #ff5900;
}
</style>
